<template>
  <li>
    <label>
      <!-- v-model:可以实现业务 -->
      <!-- 秉承如下口诀:props数据只读的，只可以使用，但是不可以修改、谁的数据用谁的方法进行修改 -->
      <!-- 标签属性常用的只有两个才会出现对象：class、style  -->
      <!-- checked:决定复选框勾选还是未勾选、取决于布尔值真、假 -->
      <!-- change:一般结合表单元素一起使用 -->
      <input type="checkbox"  :checked="todo.done" @change="handler(todo.id,$event)"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="todo.done" @click="removeTodo(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  //接受父组件todoMain传递过来的数据
  //当前todo的数据为对象
  props:['todo','changeDone',"deleteTodo"],
  name: "",
  methods: {
    //表单元素的change事件的回调
    handler(id,event){
       //第一种解决方案:获取当前选中的todo的done状态进行取反
       //第二种写法:event事件对象【触发事件节点、鼠标位置】
       let done = event.target.checked;
       //调用爷爷的方法需要传递参数：需要传递哪些参数？
       this.changeDone(id,done);
    }
    ,
    //当亲组件按钮的回调函数
    removeTodo(id){
      //接下来需要做什么?
      //删除数组里面元素，数据是爷爷给的，所以说爷爷需要给一个方法，方法可以删除选中的这个事件！
      //调用爷爷的方法，通知爷爷删除某一个事件
      this.deleteTodo(id);
    }
  },
};
</script>

<style scoped>
</style>
